<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!--prevent 清楚默认行为-->
        <a href="baidu.com" @click.prevent="changeWeather" >切换天气</a>

    </div>
    <script type="text/javascript">
    const vm=new Vue({
        el:"#root",
        data:{
           isHot:true
        },
        computed:{
        info(){
            return this.isHot?"炎热":"凉爽"
        }
        },
        methods:{
        changeWeather(){
            return this.isHot=!this.isHot
         }
        },
       /*  watch:{
         isHot:{//要监听的属性
            immediate:true,//初始化时被调用
            handler(newValue,oldValue){//修改后的值和修改前的值
              console.log("isHot被修改了",newValue,oldValue)
            }
         }
        } */

        

    })
    /* //第二种方法
    vm.$watch('isHot',{
     handler(newValue,oldValue){
      console.log("isHot被修改了",newValue,oldValue)
     }
    }) */
    </script>
  
</body>
</html>